<template>
  <!-- 有children时 -->
  <ElSubMenu v-if="item.children" :index="item.url">
    <template #title>
      <ElIcon>
        <component :is="getIcon(item.icon)"></component>
      </ElIcon>
      <span>{{ item.name }}</span>
    </template>
    <!-- 递归处理 -->
    <MenuItem v-for="child in item.children" :item="child" :key="child.url" />
  </ElSubMenu>
  <!-- 没有children时 -->
  <ElMenuItem v-else :index="item.url">
    <ElIcon>
      <component :is="getIcon(item.icon)"></component>
    </ElIcon>
    <span>{{ item.name }}</span>
  </ElMenuItem>
</template>

<script setup lang="ts">
  import { getIcon } from '@/utils/getIcon';
  import MenuItem from './index.vue';

  interface MenuItemType {
    name: string;
    icon: string;
    url: string;
    children?: MenuItemType[];
  }

  interface Props {
    item: MenuItemType;
  }

  const props = defineProps<Props>();
  const { item } = toRefs(props);
</script>

<style scoped></style>
